<template>
	<view class="order-item">
		<view class="item">
			<view class="shop-status">
				<view class="shop-info">
					<image src="/static/icon/productDetails/store.png" class="shop-img" />
					<view class="shop-name"> {{goodsInfo.shop.name}} </view>
					<Tag :text="goodsInfo.shop.type ==1?'个人': '商家'" :bgc="goodsInfo.shop.type ==1?'#FF9B05': '#FF3B1E'" />
				</view>
				<view class="status"> {{orderStatus}} </view>
			</view>
			<view class="goods-item">
				<GoodsItem :goodsInfo="item" v-for="item in goodsInfo.item" :key="item" />
			</view>
			<view class="prices">
				<view class="prices-item" v-if="goodsInfo.shipments!=2">
					<view class="label"> 配送费 </view>
					<view class="value"> ￥{{goodsInfo.delivery_money}} </view>
				</view>
				<view class="prices-item">
					<view class="label"> 共计{{goodsInfo.order_num}}件商品 </view>
					<view class="value"> ￥{{goodsInfo.pay_amount}} </view>
				</view>
			</view>
			<view class="btn-box">
				<view class="time" v-if="goodsInfo.status == 0">
					<view class="text"> 剩余时间： </view>
					<uni-countdown :font-size="14" color="#FF3B1E" :showDay="false" :second="timeout" />
				</view>
				<view class="btn" @tap="cancelOrder(goodsInfo.id)" v-if="goodsInfo.status==0"> 取消订单 </view>
				<view class="btn" @tap="applyRefund(goodsInfo.id,goodsInfo.pay_amount)" v-if="goodsInfo.status == 1&&goodsInfo.rider_status == 0"> 申请退款 </view>
				<view class="btn" @tap="goDetails(goodsInfo.id)" v-if="goodsInfo.status != 0"> 订单详情 </view>
				<view class="btn" @tap="delOrderBefore" v-if="goodsInfo.status != 0"> 删除订单 </view>
				<view class="btn" @tap="goEvaShop(goodsInfo.id,goodsInfo.shop_id)" v-if="goodsInfo.is_shop_comment == 0 && (goodsInfo.status == 5||goodsInfo.status == 6)"> 店铺评价 </view>
				<view class="btn" @tap="goEvaGoods(goodsInfo.id,goodsInfo.item,goodsInfo.shipments)" v-if="goodsInfo.status == 5"> 商品评价 </view>
				<view class="btn a-btn" @tap="confirm" v-if="goodsInfo.status == 4"> 确认收货 </view>
				<view class="btn a-btn" @tap="confirmTH" v-if="goodsInfo.status==1&&goodsInfo.shipments==2"> 确认提货 </view>
				<view class="btn a-btn" @tap="pay" v-if="goodsInfo.status == 0"> 立即支付 </view>
			</view>
		</view>
		<ConfirmDialog 
			ref="popupRef" 
			:tips="tips" 
			:confirmText="confirmText" 
			@confirm="tapPop"
		/>
	</view>
</template>

<script setup>
	// shipments  1=同城配送订单 2=到店自提订单
	// status -1:已取消 0:待付款,1:待发货/待接单/待核销(已付款),3:配送中, 4:已发货/已接单(配送中),5:待评价,6:已完成 7:退款申请中 8:退款成功
	import { ref, computed } from 'vue';
	import Tag from '@/components/Tag.vue';
	import GoodsItem from '@/components/OneGoodsItem.vue'
	import ConfirmDialog from '@/components/ConfirmDialog.vue';
	import { ConfirmOrderApi, DelOrderApi, CancelOrderApi, ConfirmOrderTHApi } from '@/service/index.js'
	import { useAddressStore, useCartStore } from '@/store/index.js'
	import { formateTime } from '@/utils/index.js'
	const props = defineProps(['goodsInfo', 'index'])
	const emit = defineEmits(['delOrder', 'cancelOrder'])
	const popupRef = ref()
	const tips = ref('')
	const dialogType = ref() // 0 删除 1 确认收货
	const confirmText = ref((''))
	const orderStatus = computed(() => {
		let text = ''
		if(props.goodsInfo.status == -1) {
			text = '已取消'
		} else if(props.goodsInfo.status == 0) {
			text = '待付款'
		} else if(props.goodsInfo.status == 1) {
			if(props.goodsInfo.shipments == 1) {
				text = '待接单'
			} else {
				text = '待提货'
			}
		} else if(props.goodsInfo.status == 3) {
			text = '配送中'
		} else if(props.goodsInfo.status == 4) {
			if(props.goodsInfo.shipments == 1) {
				text = '配送中'
			}
		} else if(props.goodsInfo.status == 5) {
			text = '待评价'
		} else if(props.goodsInfo.status == 6) {
			text = '已完成'
		} else if(props.goodsInfo.status == 7) {
			text = '退款中'
		} else if(props.goodsInfo.status == 8) {
			text = '已退款'
		}
		return text
	})
	const timeout = computed(() => {
		const time = 3600 - props.goodsInfo.residue_pay
		return time
	})
	const goDetails = (id) => {
		uni.navigateTo({
			url: `/pages/orderConfirm/orderDetails?orderId=${id}`
		})
	}
	// 申请退款
	const applyRefund = (id, price) => {
		uni.navigateTo({
			url: `/pages/applyRefund/applyRefund?order_id=${id}&order_price=${price}`
		})
	}
	// 删除订单
	const delOrderBefore = () => {
		confirmText.value = '确认'
		tips.value = '你确定要删除该订单吗？'
		dialogType.value = 0
		popupRef.value.open()
	}
	// 评价店铺
	const goEvaShop = (id, shop_id) => {
		uni.navigateTo({
			url: `/pages/orderManage/evaShop?order_id=${id}&shop_id=${shop_id}&index=${props.index}`
		})
	}
	// 评价商品
	const goEvaGoods = (id, goods, shipments) => {
		uni.navigateTo({
			url: `/pages/orderManage/evaGoods?order_id=${id}&goods=${JSON.stringify(goods)}&shipments=${shipments}`
		})
	}
	const pay = () => {
		const { total_amount, order_trade_id, pay_type } = props.goodsInfo
		uni.navigateTo({
			url: `/pages/checkstand/checkstand?total_amount=${total_amount}&trade_sn=${order_trade_id}&pay_type=${pay_type}`
		})
	}
	// 确认收货
	const confirm = () => {
		confirmText.value = '确认收货'
		tips.value = '您的产品是否已经收到货物？'
		dialogType.value = 1
		popupRef.value.open()
	}
	// 确认提货
	const confirmTH = () => {
		confirmText.value = '确认提货'
		tips.value = '您的产品是否已经收到货物？'
		dialogType.value = 2
		popupRef.value.open()
	}
	// 取消订单
	const cancelOrder = (order_id) => {
		CancelOrderApi({order_id}).then(res => {
			console.log(res);
			emit('cancelOrder', props.index)
		})
	}
	const tapPop = () => {
		// 0 删除订单 1 确认收货 2 确认提货
		if(dialogType.value == 0) {
			console.log(props.goodsInfo);
			DelOrderApi({order_id: props.goodsInfo.id}).then(res => {
				console.log(res);
				emit('delOrder', props.index)
			})
		} else if(dialogType.value == 1) {
			ConfirmOrderApi({order_id: props.goodsInfo.id}).then(res => {
				console.log(res);
				emit('delOrder', props.index)
			})
		} else if(dialogType.value == 2) {
			ConfirmOrderTHApi({order_id: props.goodsInfo.id}).then(res => {
				console.log(res);
				emit('delOrder', props.index)
			})
		}
		popupRef.value.close()
	}
</script>

<style scoped lang="scss">
	.item {
		width: 100%;
		background-color: #fff;
		border-radius: 10px;
		padding: 8px 10px 10px;
		box-sizing: border-box;
		margin-bottom: 10px;
		.shop-status {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.shop-info {
				display: flex;
				align-items: center;
				.shop-img {
					width: 18px;
					height: 18px;
				}
				.shop-name {
					color: #666666;
					font-size: 14px;
					font-weight: 400;
					margin: 0 8px 0 6px;
				}
			}
			.status {
				color: #FF3B1E;
				font-size: 14px;
				font-weight: 400;
			}
		}
		.goods-item {
			padding-top: 12px;
			border-bottom: 1px solid #eeeeee;
		}
		.prices {
			.prices-item {
				margin-top: 12px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.label {
					font-weight: 400;
					font-size: 14px;
					color: #666666;
					line-height: 19px;
				}
				.value {
					font-weight: 400;
					font-size: 14px;
					color: #333333;
					line-height: 17px;
				}
			}
		}
		.btn-box {
			display: flex;
			justify-content: end;
			margin-top: 8px;
			.time {
				flex: 1;
				display: flex;
				align-items: center;
				color: #FF3B1E;
				font-size: 14px;
				font-weight: 400;
				line-height: 32px;
			}
			.btn {
				width: 80px;
				height: 32px;
				color: #333333;
				font-size: 14px;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #FFFFFF;
				border-radius: 151px;
				border: 1px solid #999999;
				box-sizing: border-box;
				margin-left: 10px;
			}
			.a-btn {
				color: #FFFFFF;
				background: #FF3B1E;
				border: none;
			}
		}
	}
</style>